<template>
  <view class="card-list">
    <nav-bar backUrl="/pages/index/index" :isTabbar="true"/>
    <view class="card-container">
      <view class="card-item" v-for="(card, index) in cardList" :key="index" @tap="goToCardDetail(card.id)">
        <view class="card-image">
          <image :src="card.imgUrl" mode="aspectFit"></image>
        </view>
        <view class="card-info">
          <view class="card-header">
            <text class="card-title">{{ card.cardName }}</text>
            <view class="price-container">
              <text class="before-price" v-if="card.beforePrice">￥{{ card.beforePrice }}</text>
              <text class="card-price">￥{{ card.price }}</text>
            </view>
          </view>
          <view class="card-desc">{{ card.description || '暂无描述' }}</view>
          <view class="card-footer">
            <text class="expire-time">截止使用日期：{{ card.expireTime }}</text>
            <text class="buy-btn">立即购买</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import NavBar from '@/components/nav-bar/nav-bar.vue'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      cardList: [],
      baseUrl: ''
    }
  },
  onLoad() {
    this.getCardList()
  },
  methods: {
    // 获取会员卡列表
    getCardList() {
      uni.showLoading({
        title: '加载中...'
      })
      uni.request({
        url: `${uni.$config.baseUrl}/card/card/listAll`,
        method: 'GET',
        success: (res) => {
          if (res.data.code === 200) {
            this.cardList = res.data.rows.map(card => ({
              ...card,
              // 确保价格为数字
              price: Number(card.price),
              // 确保折扣为数字
              discount: Number(card.discount),
              // 确保有效期为数字
              validityDays: Number(card.validityDays)
            }))
          } else {
            uni.showToast({
              title: res.data.msg || '获取会员卡列表失败',
              icon: 'none'
            })
          }
        },
        fail: (err) => {
          uni.showToast({
            title: '网络请求失败',
            icon: 'none'
          })
          console.error('获取会员卡列表失败:', err)
        },
        complete: () => {
          uni.hideLoading()
        }
      })
    },
    // 跳转到会员卡详情页
    goToCardDetail(cardId) {
      uni.navigateTo({
        url: `/pages/rechargeCard-list/rechargeCard-list?id=${cardId}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.card-list {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding: 0 30rpx;

  .header {
    display: flex;
    align-items: center;
    padding: 60rpx 0 30rpx;

    .back-icon {
      width: 48rpx;
      height: 48rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .title {
      margin-left: 20rpx;
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
    }
  }

  .card-container {
    padding: 20rpx 0;

    .card-item {
      background-color: #fff;
      border-radius: 16rpx;
      margin-bottom: 30rpx;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
      overflow: hidden;

      &:active {
        opacity: 0.8;
      }

      .card-image {
        width: 100%;
        height: 500rpx;
        overflow: hidden;

        image {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .card-info {
        padding: 20rpx;

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 16rpx;

          .card-title {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
          }

          .price-container {
            display: flex;
            align-items: center;

            .before-price {
              font-size: 24rpx;
              color: #999;
              text-decoration: line-through;
              margin-right: 8rpx;
            }

            .card-price {
              font-size: 36rpx;
              font-weight: bold;
              color: #2B87FF;
            }
          }
        }

        .card-desc {
          font-size: 26rpx;
          color: #666;
          margin-bottom: 20rpx;
          line-height: 1.5;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }

        .card-footer {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .expire-time {
            font-size: 24rpx;
            color: #999;
          }

          .buy-btn {
            font-size: 26rpx;
            color: #fff;
            background-color: #2B87FF;
            padding: 8rpx 24rpx;
            border-radius: 24rpx;
          }
        }
      }
    }
  }

  .bottom-button {
    position: fixed;
    left: 30rpx;
    right: 30rpx;
    bottom: 40rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background-color: #2B87FF;
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;

    &:active {
      opacity: 0.8;
    }
  }
}
</style> 